<template>
    <div class="login" v-if="isLogin">
        <div class="form-ctrl">
            <span>账号：</span>
            <input type="text" placeholder="输入账号">
        </div>
        <div class="form-ctrl">
            <span>密码：</span>
            <input type="password" placeholder="输入密码">
        </div>
        <div class="form-ctrl">
            <button>登录</button>
        </div>
        <p @click="enterReg">注册</p>
    </div>
    <div class="reg" v-else>
        <div class="form-ctrl">
            <span>账号：</span>
            <input type="text" placeholder="输入账号">
        </div>
        <div class="form-ctrl">
            <span>密码：</span>
            <input type="password" placeholder="输入密码">
        </div>
        <div class="form-ctrl">
            <span>确认密码：</span>
            <input type="password" class="pwd2" placeholder="确认密码">
        </div>
        <div class="form-ctrl">
            <button>注册</button>
        </div>
        <p @click="enterLogin">登录</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const isLogin = ref(true)

const enterReg = () => {
    isLogin.value = false
}
const enterLogin = () => {
    isLogin.value = true
}
</script>

<style lang="scss" scoped>
.login,
.reg {
    width: 500px;
    min-height: 200px;
    margin: 20px auto;
    background-color: #fff;
    padding-top: 30px;
    margin-bottom: auto;
    margin-top: 10%;
}

.form-ctrl {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
        border: 1px solid #cbcbcb;
        padding: 12px 15px;
        width: 350px;
        outline: none;
    }

    button {
        padding: 6px 12px;
        background-color: #185094;
        color: #fff;
        border: none;
        cursor: pointer;
    }
}

.login,.reg {
    p {
        text-align: center;
        font-size: 12px;
        text-decoration: underline;
        cursor: default;
    }
}

.pwd2 {
    width: 320px !important;
}
</style>